import React, { useState } from 'react'
import { Row, Col, Typography, Input, Upload, Button, message } from 'antd'
import { useAppSelector } from '../../app/hooks'
import { RcFile } from 'antd/lib/upload'
const Index: React.FC = () => {
	const username = useAppSelector((state) => state.user.username)
	const nickname = useAppSelector((state) => state.user.nickname)
	const avator = useAppSelector((state) => state.user.avator)
	const id = useAppSelector((state) => state.user.id)

	const [userInfo, setUserInfo] = useState({
		id,
		nickname,
		avator,
		username
	})

	const beforeUpload = (file: RcFile) => {
		if(file.type.includes('image')) {
			return true
		} else {
			message.error('只可以上传图片哦！！！')
			return Upload.LIST_IGNORE
		}
	}
	
	return (
		<div>
			<Row style={{ margin: 10 }}>
				<Col span={4}>用户账户: </Col>
				<Col span={16}>
					<Typography.Title level={5}>{username}</Typography.Title>
				</Col>
			</Row>
			<Row style={{ margin: 10 }}>
				<Col span={4}>ID: </Col>
				<Col span={16}>
					<Typography.Title level={5}>{id}</Typography.Title>
				</Col>
			</Row>
			<Row style={{ margin: 10 }}>
				<Col span={4}>昵称: </Col>
				<Col span={16}>
					<Input value={userInfo.nickname} onChange={(e) => setUserInfo({
						...userInfo,
						nickname: e.target.value
					})}></Input>
				</Col>
			</Row>
			<Row style={{ margin: 10 }}>
				<Col span={4}>头像: </Col>
				<Col span={16}>
					<Upload action="/api/user/avator/upload" beforeUpload={ (file) => beforeUpload(file) }>
						<Button type="primary">上传头像</Button>
					</Upload>
				</Col>
			</Row>
			<img src="http://localhost:7001/static/2.webp" alt="" />
		</div>
	)
}


export default Index